<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <base data-ice="baseUrl" href="../../">
  <title data-ice="title">components/display.js | API</title>
  <link type="text/css" rel="stylesheet" href="css/style.css">
  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
  <script src="script/prettify/prettify.js"></script>
  <script src="script/manual.js"></script>
<link rel="stylesheet" href="./inject/css/0-vue.css"><link rel="stylesheet" href="./inject/css/0-app.css"><link rel="stylesheet" href="./inject/css/0-esdoc.css"><script src="./inject/script/0-custom.js"></script><meta name="description" content="&#x4F01;&#x4E1A;&#x5373;&#x65F6;&#x901A;&#x8BAF;&#x5E73;&#x53F0;"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="API"><meta property="twitter:description" content="&#x4F01;&#x4E1A;&#x5373;&#x65F6;&#x901A;&#x8BAF;&#x5E73;&#x53F0;"></head>
<body class="layout-container" data-ice="rootContainer">

<header>
  <a href="./">Home</a>
  
  <a href="identifiers.html">Reference</a>
  <a href="source.html">Source</a>
  
  <div class="search-box">
  <span>
    <img src="./image/search.png">
    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
  </span>
    <ul class="search-result"></ul>
  </div>
<a style="position:relative; top:3px;" href="https://github.com/easysoft/xuanxuan.git"><img width="20px" src="./image/github.png"></a></header>

<nav class="navigation" data-ice="nav"><div>
  <ul>
    
  <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/app-avatar.js~AppAvatar.html">AppAvatar</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/area-selector.js~AreaSelector.html">AreaSelector</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/avatar.js~Avatar.html">Avatar</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/button.js~Button.html">Button</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/checkbox.js~Checkbox.html">Checkbox</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/click-outside-wrapper.js~ClickOutsideWrapper.html">ClickOutsideWrapper</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/display-container.js~DisplayContainer.html">DisplayContainer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/display-layer.js~DisplayLayer.html">DisplayLayer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/group-list.js~GroupList.html">GroupList</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/heading.js~Heading.html">Heading</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/hotkey-input-control.js~HotkeyInputControl.html">HotkeyInputControl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/icon.js~MDIcon.html">MDIcon</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/image-cutter.js~ImageCutter.html">ImageCutter</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/image-holder.js~ImageHolder.html">ImageHolder</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/input-control.js~InputControl.html">InputControl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/list-item.js~ListItem.html">ListItem</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/pager.js~Pager.html">Pager</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/radio-group.js~RadioGroup.html">RadioGroup</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/radio.js~Radio.html">Radio</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/search-control.js~SearchControl.html">SearchControl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/select-box.js~Selectbox.html">Selectbox</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/spinner.js~Spinner.html">Spinner</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/tab-pane.js~TabPane.html">TabPane</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/tabs.js~Tabs.html">Tabs</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showContextMenu">showContextMenu</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayGetRef">displayGetRef</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayHide">displayHide</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayRemove">displayRemove</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displaySetStyle">displaySetStyle</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayShow">displayShow</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showImageViewer">showImageViewer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showMessager">showMessager</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showAlert">showAlert</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showConfirm">showConfirm</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showModal">showModal</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showPrompt">showPrompt</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showPopover">showPopover</a></span></span></li>
</ul>
</div>
</nav>

<div class="content" data-ice="content"><h1 data-ice="title">components/display.js</h1>
<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">/** @module display */

import React from &apos;react&apos;;
import ReactDOM from &apos;react-dom&apos;;
import DisplayContainer from &apos;./display-container&apos;;

/**
 * &#x5F39;&#x51FA;&#x5C42;&#x7BA1;&#x7406;&#x7EC4;&#x4EF6; ID
 * @private
 * @type {string}
 */
const containerId = &apos;display-container&apos;;
/**
 * &#x5F39;&#x51FA;&#x5C42;&#x7BA1;&#x7406;&#x7EC4;&#x4EF6;&#x6E32;&#x67D3;&#x5143;&#x7D20;
 * @private
 * @type {Element}
 */
let container = document.getElementById(containerId);
if (!container) {
    container = document.createElement(&apos;div&apos;);
    container.id = containerId;
    container.classList.add(&apos;affix&apos;);
    document.body.appendChild(container);
}

/**
 * &#x7528;&#x4E8E;&#x5B58;&#x50A8;&#x5F39;&#x51FA;&#x5C42;&#x7BA1;&#x7406;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;
 * @type {DisplayContainer}
 * @private
 */
let displayContainer = null;
ReactDOM.render(&lt;DisplayContainer ref={e =&gt; {displayContainer = e;}} /&gt;, container);

/**
 * &#x663E;&#x793A;&#x5F39;&#x51FA;&#x5C42;
 * @param {Object} props &#x5F39;&#x51FA;&#x5C42;&#x521D;&#x59CB;&#x5316;&#x5BF9;&#x8C61;
 * @param {?Function} callback &#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x540E;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
 * @return {DisplayLayer}
 * @function
 */
export const displayShow = (props, callback) =&gt; (displayContainer &amp;&amp; displayContainer.show(props, callback));

/**
 * &#x9690;&#x85CF;&#x6307;&#x5B9A; ID &#x7684;&#x5F39;&#x51FA;&#x5C42;
 * @param {string} id &#x5F39;&#x51FA;&#x5C42; ID
 * @param {?Function} callback &#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x540E;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
 * @param {?boolean} remove &#x662F;&#x5426;&#x5728;&#x9690;&#x85CF;&#x540E;&#x4ECE;&#x754C;&#x9762;&#x4E0A;&#x79FB;&#x9664;&#x5143;&#x7D20;
 * @return {DisplayLayer}
 * @function
 */
export const displayHide = (id, callback, remove) =&gt; (displayContainer &amp;&amp; displayContainer.hide(id, callback, remove));

/**
 * &#x9690;&#x85CF;&#x5E76;&#x4ECE;&#x754C;&#x9762;&#x4E0A;&#x79FB;&#x9664;&#x6307;&#x5B9A; ID &#x7684;&#x5F39;&#x51FA;&#x5C42;
 * @param {string} id &#x5F39;&#x51FA;&#x5C42; ID
 * @param {?Function} callback &#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x540E;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
 * @return {DisplayLayer}
 * @function
 */
export const displayRemove = (id, callback) =&gt; (displayContainer &amp;&amp; displayContainer.remove(id, callback));

/**
 * &#x83B7;&#x53D6;&#x6307;&#x5B9A; ID &#x7684;&#x5F39;&#x51FA;&#x5C42;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;
 * @param {string} id &#x5F39;&#x51FA;&#x5C42; ID
 * @return {DisplayLayer}
 * @function
 */
export const displayGetRef = id =&gt; {
    const item = displayContainer &amp;&amp; displayContainer.getItem(id);
    return item &amp;&amp; item.ref;
};

/**
 * &#x8BBE;&#x7F6E;&#x6307;&#x5B9A; ID &#x5F39;&#x51FA;&#x5C42;&#x754C;&#x9762;&#x5143;&#x7D20;&#x4E0A;&#x7684;&#x6837;&#x5F0F;
 * @param {string} id &#x5F39;&#x51FA;&#x5C42; ID
 * @param {Object} newStyle CSS &#x6837;&#x5F0F;&#x5BF9;&#x8C61;
 * @param {?Function} callback &#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x540E;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
 * @return {DisplayLayer}
 * @function
 */
export const displaySetStyle = (id, newStyle, callback) =&gt; (displayContainer &amp;&amp; displayContainer.setStyle(id, newStyle, callback));

export default {
    show: displayShow,
    hide: displayHide,
    remove: displayRemove,
    getRef: displayGetRef,
    setStyle: displaySetStyle,
};
</code></pre>

</div>

<footer class="footer">
  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
</footer>

<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>
